<template>
  <div>
    <div class="personal-info-box ">
      <div class="triangle"></div>
      <div class="player-name">
        <img :src="battleTeam.homeTeamImg" alt="" />
        <span
          >{{ battleTeam.homeName }}{{ battleTeam.score
          }}{{ battleTeam.awayName }}</span
        >
        <img :src="battleTeam.awayTeamImg" alt="" />
      </div>
      <div class="bottom-tab-bar">
        <div class="personal-info-el-tabs">
          <router-link to="matchInfo">
            基本信息
          </router-link>
          <router-link to="matchSquad">
            阵容得分
          </router-link>
          <router-link to="performanceBattle">
            表现对比
          </router-link>
        </div>
      </div>
    </div>
    <div>
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import MatchInfo from "./reportComps/matchInfo/MatchInfo";
import MatchSquad from "./reportComps/matchSquad/MatchSquad";
import PerformanceBattle from "./reportComps/performanceBattle/PerformanceBattle";
export default {
  name: "MatchReport",
  components: {
    MatchInfo,
    MatchSquad,
    PerformanceBattle,
  },
  data() {
    return {
      activeName: "matchInfo",
      matchId: null,
      //loading效果
      loading: true,
      //对阵双方和比分，在MatchSquad和PerformanceBattle也要用到
      battleTeam: {},
    };
  },
  watch: {},
  methods: {
    async getBattleTeam(matchId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/matchInformation/${matchId}`
      );
      this.battleTeam = data.battleTeam;
      console.log("getBattleTeam方法被调用");
      this.$store.commit("changeMatchId", this.battleTeam);
    },
  },
  created() {
    console.log("report_created");
  },
  beforeRouteEnter(to, from, next) {
    const { matchId } = to.params;
    console.log("report_beforeRouteEnter:", matchId);
    next((vm) => {
      vm.getBattleTeam(matchId);
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log("report_beforeRouteUpdate");
    next();
  },
};
</script>

<style scoped>
.personal-info-box {
  position: relative;
  background-color: #f1f6f9;
  width: 1440px;
  height: 294px;
  margin: auto;
}

.triangle {
  border-style: solid;
  border-width: 29px;
  border-color: #65d6c1 transparent transparent #65d6c1;
  width: 0;
  height: 0;
}

.player-name {
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  top: 20%;
  left: 10%;
  text-align: center;
  font-size: 77px;
  width: 80%;
  letter-spacing: 5px;
  height: 120px;
  line-height: 120px;
  color: rgba(22, 199, 154, 0.7);
  font-weight: bold;
  /*background-color: navy;*/
}
.player-name img {
  width: 100px;
  height: 100px;
}

.player-info-item > div:nth-child(1) {
  width: 80px;
  /*background-color: red;*/
}

.player-info-item > div:nth-child(2) {
  line-height: 30px;
  width: 140px;
  height: 30px;
  /*background-color: blue;*/
}

.player-country,
.player-club {
  display: flex;
}

.national-flag {
  width: 30px;
  height: 30px;
}

.club-logo {
  width: 30px;
  height: 30px;
}

.player-img {
  position: absolute;
  top: 47%;
  left: 1%;
  /*width: 250px;*/
  /*height: 250px;*/
  /*border-radius: 50%;*/
  z-index: 2;
  /*overflow: hidden;*/
}

.player-img > img {
  margin-top: 13px;
  width: 277px;
  /*height: 225px;*/
  /*border-radius: 50%;*/
}

.bottom-tab-bar {
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: 30px;
  width: 100%;
  height: 57px;
  background-color: #194568;
}

.personal-info-el-tabs {
  width: 400px;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*font-size: 30px;*/
  /*margin-top: 10px;*/
  margin-left: 300px;
  /*margin-right: 25px;*/
  /*background-color: red;*/
}
.personal-info-el-tabs a {
  display: block;
  /*margin-top: -px;*/
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 10px;
  border-bottom: 4px solid #194568;
}
.personal-info-el-tabs a:hover {
  color: #16c79a;
}
.personal-info-el-tabs .router-link-exact-active {
  color: #16c79a;
  border-bottom: 4px solid #16c79a;
}

.personal-info-el-tabs /deep/ .el-tabs__item {
  color: white;
  font-size: 20px;
  font-weight: bold;
}
.personal-info-el-tabs /deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
.personal-info-el-tabs /deep/ .el-tabs__active-bar {
  height: 3px;
  background-color: #65d6c1;
}
.personal-info-el-tabs /deep/ .el-tabs__item:hover {
  color: #65d6c1;
}
.personal-info-el-tabs /deep/ .el-tabs__item.is-active {
  color: #65d6c1;
}
</style>
